{% extends 'base.html' %}
{% load staticfiles %}
{%block custom_css%}
<style>
    #input-form {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=80);
    }

    #demo1 {
        display: none;
        position: fixed;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 600px;
        height: 520px;
        background-color: rgba(255, 255, 255, 1);
        z-index: 1002;
        padding: 0px 20px 0px 20px;
    }

    .ion-close-round:before {
        content: "X";
    }

    .close-btn {
        float: right;
        cursor: pointer;
        opacity: .4;
        margin-top: 20px;
    }

    .close-btn:hover {
        opacity: 1;
    }

    .form-horizontal {
        margin-left: 60px;
    }

    .bta,
    .bta:hover {
        color: #337ab7;
    }
</style>
{%endblock%}

{% block content %}

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    {%if user.type <= 1%}
    <div>
        <h2 class="sub-header">员工信息</h2>
        <div style="margin-top:-50px;"><button type="button" id="bt1" class="btn btn-primary pull-right">添加</button>
        </div>
        <div class="clearfix"></div>
    </div>
    {%else%}
    <h2 class="sub-header">员工信息</h2>
    {%endif%}
    <div class="table-responsive" style="margin-top:18px;">
        <table class="table table-striped" id="show-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>手机号</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>职位</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for staff in staff_list%}
                <tr>
                    <td>{{forloop.counter}}</td>
                    <td>{{staff.username}}</td>
                    <td>{{staff.email}}</td>
                    <td>{{staff.mobile}}</td>
                    <td>{{staff.get_gender_display}}</td>
                    <td>{{staff.age}}</td>
                    <td>
                        {%if staff.type == 0%}
                        系统管理员
                        {%elif staff.type == 1%}
                        经理
                        {%elif staff.type == 2%}
                        收银员
                        {%elif staff.type == 4%}
                        保洁员
                        {%elif staff.type == 5%}
                        维修工人
                        {%endif%}
                    </td>
                    {%if user.type <= 1%}
                    <td><a type="button" class="btn btn-default bta" href="/staff/edit?id={{staff.id}}">编辑</a>
                        <a type="button" class="btn btn-default bta" href="/staff/delete?id={{staff.id}}">删除</a></td>
                    {%else%}
                    <td><a type="button" class="btn btn-default disabled bta" href="#">编辑</a>
                        <a type="button" class="btn btn-default disabled bta" href="#">删除</a></td>
                    {%endif%}
                    </tr>
                {%endfor %}

            </tbody>
        </table>
    </div>
</div>
<div id="input-form">
</div>
<div id="demo1">
    <div style="margin-bottom:10px;">
        <h3 style="float:left;">添加新员工</h3>
        <div><span title="关闭" class="close-btn ion-close-round"></span></div>
        <div style="clear:both;"></div>
    </div>
    <form class="form-horizontal" method="POST" action="/staff">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="username" id="input1">
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
            <div class="col-sm-8">
                <input type="email" class="form-control" name="email" id="input2">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-8">
                <input type="password" class="form-control" name="password" id="input3">
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">手机号</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="mobile" id="input4">
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">身份证号</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="id_card" id="input5">
            </div>
        </div>
        <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">职位</label>
                <div class="col-sm-5">
                    <select class="form-control" name='type' id="staff-type">
                        <option value="0">系统管理员</option>
                        <option value="1">经理</option>
                        <option value="2" selected = "selected">收银员</option>
                        <option value="4">保洁员</option>
                        <option value="5">维修工人</option>
                    </select>
                </div>
            </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">年龄</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="age" id="input6">
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">性别</label>
            <div class="col-sm-8">
                <label class="radio-inline">
                    <input type="radio" name="gender" class="input7" value="male" checked="checked">男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="gender" class="input7" value="female">女
                </label>
            </div>
        </div>
        {% csrf_token %}
        <div class="form-group">
            <div class="col-sm-offset-8 col-sm-2">
                <button type="button" class="btn btn-primary btn-add">添加</button>
            </div>
        </div>
    </form>
</div>

<script>
    $("#bt1").click(function () {
        $('#input1').val('')
        $('#input2').val('')
        $('#input3').val('')
        $('#input4').val('')
        $('#input5').val('')
        $('#input6').val('')
        $("#input-form").show()
        $("#demo1").show()
    })
    $(".close-btn").click(function () {
        $("#input-form").hide()
        $("#demo1").hide()
    })
    $(".btn-add").click(function () {
        var username = $('#input1').val()
        var email = $('#input2').val()
        var password = $('#input3').val()
        var mobile = $('#input4').val()
        var id_card = $('#input5').val()
        var staff_type = $('#staff-type').val()
        var age = $('#input6').val()
        var gender = $('.input7:radio[name=gender]:checked').val()
        var id = parseInt($("#show-table tbody tr:last td:first").text()) + 1
        if (gender == 'male') {
            var user_gender = '男'
        } else {
            var user_gender = '女'
        }
        if (staff_type == 0) {
            var uesr_type = '系统管理员'
        } else if (staff_type == 1) {
            var uesr_type = '经理'
        } else if (staff_type == 2) {
            var uesr_type = '收银员'
        } else if (staff_type == 4) {
            var uesr_type = '保洁员'
        } else if (staff_type == 5) {
            var uesr_type = '维修工人'
        }
        $.ajax({
            type: "POST",
            url: "/staff/add_staff",
            data: {
                username: username,
                email: email,
                password: password,
                mobile: mobile,
                id_card: id_card,
                age: age,
                staff_type:staff_type,
                gender: gender,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function (result) {
                if (result.status == 'ok') {
                    $("#show-table tbody").append("<tr>\
                    <td>" + id + "</td>\
                    <td>" + username + "</td>\
                    <td>" + email + "</td>\
                    <td>" + mobile + "</td>\
                    <td>" + user_gender + "</td>\
                    <td>" + age + "</td>\
                    <td>" + uesr_type + "</td>\
                    <td><button type='button' class='btn btn-default'><a href='/staff/edit?id=" + result.data + "'>编辑</a></button>\
                        <button type='button' class='btn btn-default'><a href='/staff/delete?id=" + result.data + "'>删除</a></button></td>\
                    </tr>")
                }
            }
        })

        $("#input-form").hide()
        $("#demo1").hide()
    })
</script>


{% endblock %}